<template>
  <div>
    <div class="qyxx">
      <div class="qyxx_inp">
        <ul>
          <li>
            <span class="inp_tit">企业编码：</span>
            <a-input disabled v-model="qybm" style="width:500px" type="text" placeholder="公司编码" />
          </li>
          <li>
            <span class="inp_tit">手机：</span>
            <a-input disabled v-model="phone" style="width:500px" type="text" placeholder="管理员手机" />
          </li>
          <li>
            <span class="inp_tit">
              <span class="bxred">*</span>
              公司名称：
            </span>
            <a-input v-model="gsmc" style="width:500px" type="text" placeholder="请输入公司名称" />
            <span class="bxred" v-if="gsmc==''">&nbsp; *必填</span>
          </li>
          <li>
            <span class="inp_tit">
              <span class="bxred">*</span>联系人：
            </span>
            <a-input style="width:500px" v-model="user" type="text" placeholder="请输入联系人姓名" />
            <span class="bxred" v-if="user==''">&nbsp; *必填</span>
          </li>
          <li>
            <span class="inp_tit">
              <span class="bxred">*</span>所属地区：
            </span>

            <a-select
              showSearch
              :placeholder="live"
              optionFilterProp="children"
              style="width: 500px"
              @change="liveChange"
              :filterOption="filterOption"
            >
              <a-select-option v-for="(item,i) in shdqdata" :key="i" :value="item">{{item}}</a-select-option>
            </a-select>
            <span class="bxred" v-if="live==''">&nbsp; *必填</span>
          </li>
          <li>
            <span class="inp_tit">详细地址：</span>
            <a-input v-model="xxdz" style="width:500px" type="text" placeholder="请输入详细地址" />
          </li>
          <li>
            <span class="inp_tit">类型：</span>
            <!--  @change="lxChange" -->
            <a-radio-group v-model="khlx">
              <a-radio value="生产厂">生产厂</a-radio>
              <a-radio value="贸易商">贸易商</a-radio>
              <a-radio value="其他类型">其他类型</a-radio>
            </a-radio-group>
          </li>
          <li>
            <span class="inp_tit">办公电话：</span>
            <a-input v-model="bgphone" style="width:500px" type="text" placeholder="请输入办公电话" />
          </li>
          <li>
            <span class="inp_tit">Email：</span>
            <a-input v-model="email" style="width:500px" type="text" placeholder="请输入邮箱" />
          </li>
          <li>
            <span class="inp_tit">传真：</span>
            <a-input v-model="cz" style="width:500px" type="text" placeholder="请输入传真" />
          </li>
          <li>
            <span class="inp_tit">QQ：</span>
            <a-input v-model="qq" style="width:500px" type="text" placeholder="请输入QQ号码" />
          </li>
          <li>
            <span class="inp_tit">网址：</span>
            <a-input v-model="http" style="width:500px" type="text" placeholder="请输入网址" />
          </li>
          <li>
            <span class="inp_tit">企业简介：</span>

            <a-textarea
              v-model="gsjj"
              style="width:500px;min-height:80px;"
              placeholder="请输入公司简介"
              autosize
            />
            <!-- <div class="uploadimg" style="min-width: 50px">           
              <a-upload
                v-if="image!=''"
                name="avatar"
                listType="picture-card"
                class="avatar-uploader"
                :showUploadList="false"
                action="http://mobile.bearing.cn/set/upload.php"
                :beforeUpload="beforeUpload"
                @change="Changecpimg"
                accept=".jpg"
              >
                <img v-if="image" :src="imageUrl==''?imageUrlfile:imageUrl" class="avatar" />
                <div v-else class="ico">
                  <a-icon :type="loading ? 'loading' : 'cloud-upload'" />
                  <span class="uptext">图片上传</span>
                </div>
              </a-upload>
            </div>-->
            <div class="clearfix qyjj_clearfix">
              <a-upload
                action="http://mobile.bearing.cn/set/upload.php"
                listType="picture-card"
                :fileList="qyjjfileList"
                @preview="handlePreview"
                @change="Changecpimg"
                accept=".jpg"
                :remove="qyjjremovelist"
              >
                <div v-if="qyjjfileList.length < 1">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">上传简介图</div>
                </div>
              </a-upload>
              <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                <img alt="example" style="width: 100%" :src="previewImage" />
              </a-modal>
            </div>
          </li>
          <li>
            <span class="inp_tit">主营产品：</span>
            <!-- 开始 上传产品图 -->
            <!-- <span>上传产品图：</span> -->
            <div class="clearfix">
              <a-upload
                action="http://mobile.bearing.cn/set/upload.php"
                listType="picture-card"
                :fileList="fileList"
                @preview="handlePreview"
                @change="handleChange"
                accept=".jpg"
                :remove="removelist"
              >
                <div v-if="fileList.length < 11">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">上传产品图</div>
                </div>
              </a-upload>
              <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                <img alt="example" style="width: 100%" :src="previewImage" />
              </a-modal>
            </div>
            <!-- 结束 上传产品图 -->
          </li>
          <li class="foot_btn">
            <div class="xg">
              <a-button type="primary" @click="tjxgsub">提交修改</a-button>
              <a-spin v-if="spinflag" />
            </div>
            <a-button @click="quxiao">取消</a-button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
//上传图片
function getBase64(img, callback) {
  const reader = new FileReader();
  let file = [];
  file = reader;
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
  sessionStorage.setItem("file", reader);
}

export default {
  inject: ["reload"],

  data() {
    return {
      file: "", //上传产品图--file
      imageUrlfile: "",
      image: "",
      loading: false, //上传产品图
      //主营产品----开始
      previewVisible: false,
      previewImage: "",
      fileList: [],
      qyjjfileList: [],
      shdqdata: [],
      //主营产品----结束
      qybm: this.$store.state.bbl_sqdwid,
      phone: this.$store.state.bbl_phone,
      gsmc: "",
      user: "",
      live: "",
      xxdz: "",
      khlx: "其他类型",
      bgphone: "",
      email: "",
      cz: "",
      qq: "",
      http: "",
      gsjj: "",
      imageUrl: "", //上传产品图

      zypic: [],
      productpic: [],
      //input-model------------------
      spinflag: false
    };
  },

  methods: {
    quxiao() {
      //  this.getqyxx()
      this.reload();
    },
    //------开始 上传产品图
    // Changecpimg(info) {
    //   if (info.file.status === "uploading") {
    //     this.loading = true;
    //   }

    //   if (info.file.status === "done") {
    //     getBase64(info.file.originFileObj, imageUrl => {
    //       this.imageUrl = imageUrl;
    //       this.loading = false;
    //       this.file = info.file.originFileObj;
    //     });
    //   }
    // },
    beforeUpload(file) {
      const isJPG = file.type === "image/jpeg";
      if (!isJPG) {
        this.$message.error("只能上传JPG格式!");
      }
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        this.$message.error("图片大小不能超过10MB!");
      }

      return isJPG && isLt2M;
    },

    //------结束 上传产品图
    //主营产品----开始
    handleCancel() {
      this.previewVisible = false;
    },
    handlePreview(file) {
      this.previewImage = file.url || file.thumbUrl;
      this.previewVisible = true;
    },
    handleChange({ fileList }) {
      this.fileList = fileList;
    },
    Changecpimg({ fileList }) {
      console.log(fileList);
      this.qyjjfileList = fileList;
    },
    //主营产品----结束

    liveChange(value) {
      this.live = value;
    },

    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    //获取地区
    getshdq() {
      this.axios.post("xunjia/address.php").then(res => {
        if (res.data.code == 303) {
          this.shdqdata = res.data.result;
        }
      });
    },
    getqyxx() {
      this.axios
        .post(
          "set/BusinessMsg.php",
          qs.stringify({
            phone: this.$store.state.bbl_phone
          })
        )
        .then(res => {
          if (res.data.code == 303) {
            this.gsbm = res.data.result.gsbm;
            this.gsmc = res.data.result.dwmc;
            this.user = res.data.result.lxr;
            this.live = res.data.result.szsf;
            this.xxdz = res.data.result.lxrdz;
            this.bgphone = res.data.result.lxdh;
            this.email = res.data.result.Email;
            this.cz = res.data.result.Skype;
            this.qq = res.data.result.QQ;
            this.http = res.data.result.weburl;
            this.khlx =
              res.data.result.khlx.trim() == ""
                ? this.khlx
                : res.data.result.khlx.trim();
            this.image = res.data.result.zhuypic;
            console.log("getqyxx----", this.image);
            // this.imageUrlfile =
            //   "https://yb.bearing.cn/" + res.data.result.zhuypic;

            if (this.image != " " && this.image != null) {
              let list = {
                uid: "one",
                name: " ",
                status: " ",
                url: " http://yb.bearing.cn/" + this.image
              };
              this.qyjjfileList.push(list);
            }
            console.log("this.qyjjfileList-----------", this.qyjjfileList);
            this.gsjj = res.data.result.zhuyingcp;
            if (res.data.result.productpic != null) {
              this.zypic = res.data.result.productpic.split(",");
            }

            for (var i = 0; i < this.zypic.length; i++) {
              if (this.zypic[0] != " ") {
                let list = {
                  uid: i,
                  name: " ",
                  status: " ",
                  url: " http://yb.bearing.cn/" + this.zypic[i]
                };
                this.fileList.push(list);
              }
            }
          }
        });
    },
    //  第一个参数是图片的URL地址，第二个是转换成base64地址后要赋值给的img标签
    removelist(file) {
      this.uid = file.uid;

      if (this.uid == 0 || this.uid == 1 || this.uid == 2) {
        this.zypic.splice(this.uid, 1);
      } else {
      }
    },

    qyjjremovelist(file) {
      this.image = "";
    },

    //提交修改
    tjxgsub() {
      if (this.gsmc != "" && this.user != "" && this.live != "") {
        if (this.fileList.length) {
          for (var i = 0; i < this.fileList.length; i++) {
            if (this.fileList[i].url != undefined) {
              this.productpic.push(this.zypic[i]);
            } else {
              this.productpic.push(this.fileList[i].thumbUrl);
            }
          }
        } else {
          this.fileList = [];
        }
        if (this.qyjjfileList.length) {
          if (this.qyjjfileList[0].url != undefined) {
            this.image = this.image;
          } else {
            this.image = this.qyjjfileList[0].thumbUrl;
          }
        } else {
          this.qyjjfileList = [];
          this.image = "";
        }
        this.spinflag = true;

        console.log("sub---------", this.image);
        this.axios
          .post(
            "set/BusinessMsgEdit.php",
            qs.stringify({
              gsbm: this.qybm,
              phone: this.phone,
              dwmc: this.gsmc,
              lxr: this.user,
              szsf: this.live,
              lxrdz: this.xxdz,
              lxdh: this.bgphone,
              email: this.email,
              khlx: this.khlx,
              Skype: this.cz,
              qq: this.qq,
              weburl: this.http,
              // zhuypic: this.imageUrl == "" ? this.image : this.imageUrl,
              zhuypic: this.image,

              zhuyingcp: this.gsjj,
              productpic: this.productpic.length == 0 ? "" : this.productpic
            })
          )
          .then(res => {
            if (res.data.code == 303) {
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg
              });
              this.spinflag = false;
              this.productpic = [];
              this.reload();
            } else {
              this.spinflag = false;

              this.$notification["error"]({
                message: "失败",
                description: res.data.msg
              });
              this.productpic = [];
            }
          });
      } else {
        this.$notification["error"]({
          message: "失败",
          description: "请将内容填写完整！"
        });
      }
    }
  },
  updated() {},
  created() {
    this.getshdq();
    this.getqyxx();
  }
};
</script>

<style lang='less'>
.qyxx {
  width: 98%;
  height: auto;
  box-shadow: 0px 0px 7px #ccc;
  background-color: #fff;
  margin: 9px auto;
  position: relative;
  top: 63px;
  // transform: translateX(-50%);
  text-align: left;
  padding: 30px 77px;
  .qyxx_inp {
    ul {
      li {
        margin: 20px 0;
        .inp_tit {
          display: inline-block;
          width: 100px;
          text-align: right;
        }
        textarea {
          vertical-align: top;
        }
        .uploadimg {
          display: inline-block;
          vertical-align: top;
          // border-right: 1px solid #eee;
          text-align: center;
          .avatar-uploader {
            width: 100%;
            height: 52px;
            line-height: 52px;
            display: inline-block;
            margin-top: 5px;
            // position: relative;
            // top: -19px;
            // left: 83px;
          }
          .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
          }

          .avatar-uploader .el-upload:hover {
            border-color: #409eff;
          }

          .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
          }

          .avatar {
            width: 90px;
            height: 90px;
            display: block;
          }
          .ico {
            .anticon-cloud-upload {
              vertical-align: top;
              margin-right: 5px;
              color: #40a9ff;
            }
            .uptext {
              font-size: 14px;
              font-weight: bold;
              color: #40a9ff;
            }
          }
        }
        .yblist .cpimgfoot .uploadimg .avatar-uploader {
          line-height: 30px !important;
        }
        //上传图片
        .clearfix {
          width: 80%;
          display: inline-block;
          vertical-align: middle;
          .ant-upload.ant-upload-select-picture-card {
            border: 1px dashed #d9d9d9 !important;
            width: 104px !important;
            height: 104px !important;
          }
        }
        .qyjj_clearfix {
          width: 40%;
        }
        ant-upload.ant-upload-select-picture-card :hover {
          border-color: #40a9ff !important;
        }

        .yblist .cpimgfoot .uploadimg .avatar {
          margin: 0 auto;
        }
        /* you can make up upload button and sample style by using stylesheets */
        .ant-upload-select-picture-card i {
          font-size: 22px;
          color: #999;
        }

        .ant-upload-select-picture-card .ant-upload-text {
          margin-top: 8px;
          color: #666;
        }
        .xg {
          display: inline-block;
          position: relative;
          .ant-spin-spinning {
            position: absolute;
            width: 100%;
            z-index: 999;
            background: rgba(255, 255, 255, 0.5);
            left: 0;
            top: 0;
            height: 100%;
            padding: 3px 0;
          }
        }
      }
      .foot_btn {
        width: 30%;
        text-align: center;
        button {
          margin: 0 20px;
        }
      }
    }
  }
}
</style>
